<template>
  <div class="help-container">
    <h1>项目帮助文档</h1>
    <div class="markdown-content" v-html="renderedMarkdown"></div>
  </div>
</template>

<script>
import { marked } from 'marked';
import { ref, onMounted } from 'vue';

export default {
  name: 'HelpView',
  setup() {
    const renderedMarkdown = ref('');

    onMounted(async () => {
      try {
        // 读取项目根目录下的README.md文件
        const response = await fetch('/README.md');
        const markdownText = await response.text();
        renderedMarkdown.value = marked(markdownText);
      } catch (error) {
        console.error('读取文档失败:', error);
        renderedMarkdown.value = '<p>文档加载失败，请检查文档是否存在。</p>';
      }
    });

    return { renderedMarkdown };
  }
};
</script>

<style scoped>
.help-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.markdown-content {
  margin-top: 20px;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
</style>